<template>
  <div :style="boxStyle" class="pdb15">
    <el-button v-if="showDel" type="primary" size="mini" @click="del">批量删除</el-button>
    <el-button v-if="showCreate" type="primary" size="mini" @click="addNew">添加</el-button>
    <el-button v-if="showUpload" type="primary" size="mini" @click="upload">导入</el-button>
    <el-button v-if="showExport" type="primary" size="mini" icon="el-icon-download" @click="handleExport">导出</el-button>
    <el-button v-if="showGroupSend" type="primary" size="mini" @click="sendMessage">群发短信</el-button>
    <el-button v-if="showGroupManage" type="primary" size="mini" @click="groupManage">分组管理</el-button>
  </div>
</template>

<script>
  import { parseTime } from '../../utils'

  export default {
    name: 'BtnsAboveTable',
    props: {
      showCreate: {
        type: Boolean,
        default: false
      },
      showUpload: {
        type: Boolean,
        default: false
      },
      showExport: {
        type: Boolean,
        default: true
      },
      showDel: {
        type: Boolean,
        default: false
      },
      showGroupSend: {
        type: Boolean,
        default: false
      },
      showGroupManage: {
        type: Boolean,
        default: false
      },
      tableTitle: {
        type: Array,
        default: () => []
      },
      tableData: {
        type: Array,
        default: () => []
      },
      boxStyle: {
        type: String
      },
      uploadUrl: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: '广告订单'
      },
      onExport: {
        type: Function
      }
    },
    data() {
      return {
        // 导出excel
        downloadLoading: false,
        filename: this.title + parseTime(new Date(), '{y}{m}{d}{h}{i}'),
        loading: null,
        autoWidth: true,
        bookType: 'xlsx'
      }
    },
    watch: {
      tableData(val1, val2) {
        if (val1 === val2) {
          return false
        }
        if (val1.length && this.downloadLoading) {
          this.handleDownload()
        } else if (val1.length === 0) {
          this.$message({
            message: '你没有权限或者没有数据可以导出',
            type: 'info',
            duration: 5000
          })
        } else {
          this.$message({
            message: '导出超时',
            type: 'info'
          })
        }
        this.downloadLoading = false
        setTimeout(() => {
          this.loading.close()
        }, 0)
      }
    },
    methods: {
      upload() {
        this.$router.push({
          name: 'upload',
          query: {
            title: this.title,
            action: this.uploadUrl
          }
        })
      },
      addNew() {
        this.$emit('addNew')
      },
      sendMessage() {
        this.$emit('sendmessage')
      },
      groupManage() {
        this.$emit('groupManage')
      },
      del() {
        this.$emit('del')
      },
      // 导出excel
      handleExport() {
        this.loading = this.$loading({
          lock: true,
          text: '导出中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        // setTimeout(() => {
        //   this.loading.close()
        //   this.downloadLoading = false
        // }, 8000)
        this.onExport()
        this.downloadLoading = true
      },

      handleDownload() {
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = this.tableTitle.map(item => item.cn)
          const filterVal = this.tableTitle.map(item => item.en)
          const list = this.tableData
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.filename,
            autoWidth: this.autoWidth,
            bookType: this.bookType
          })
        })
        this.loading.close()
        this.downloadLoading = false
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          return v[j]
        }))
      }

    }
  }
</script>

<style scoped>

</style>
